<template>
  <view v-if="resultDetails" :class="['container', resultDetails.result, {'see-result': resultShow}]">
    <template v-if="resultShow">
      <image :src="`${imgBaseUrl}${resultDetails.topBg}`" mode="widthFix" class="top-bg" />
      <image :src="`${imgBaseUrl}${resultDetails.topBtn}`" class="top-btn" @click="showResult(false)" />
      <view class="tabs">
        <image
            class="tab"
            v-for="(tab, index) in resultDetails.tabs"
            :key="index"
            :src="`${imgBaseUrl}${selectedTabIndex === index ? tab.selectedBg : tab.bg}`"
            @click="switchTab(index)"
        />
      </view>
      <view :class="['main-content', {excessive: selectedTabIndex === 1, even: listData.length % 2 === 1}]">
        <view class="item" v-for="(item, index) in listData" :key="index">
          <view class="title-container">
            <view class="title-wrapper">
              <view>
                <view class="title">{{item.title}}</view>
                <view class="title-decoration"/>
              </view>
            </view>
          </view>
          <view class="content">
            <view class="content-text">{{item.content}}</view>
            <view class="content-decoration-box"/>
          </view>
          <image class="img" :src="`${imgBaseUrl}${item.img}`" />
        </view>
      </view>
    </template>
    <view v-else class="share-container">
      <image :src="resultImg" mode="widthFix" class="share-bg" show-menu-by-longpress />
      <image :src="`${imgBaseUrl}${resultDetails.mask}`" mode="widthFix" class="mask-bg" />
      <view class="result-btn-row" @click="showResult(true)">
        <image :src="staticImgs.resultBtn" class="result-btn" />
        <image :src="staticImgs.resultArrow" class="result-arrow" />
      </view>
      <view class="download">
        <view class="download-text">长按保存</view>
        <image :src="staticImgs.downloadIcon" class="download-icon" />
      </view>
      <image :src="staticImgs.back" class="back-btn" @click="backHandle" />
    </view>
  </view>
</template>

<script>
  import { mapGetters } from 'vuex'
  import {useDrawPoster} from '@/components/u-draw-poster'

  export default {
    props: {
      pageData: {
        type: Object,
        default: null
      }
    },
    data(){
      return {
        staticImgs: {
          resultBtn: this.imgBaseURL + '/scl/result/fpacpt/result-view-btn.png',
          resultArrow: this.imgBaseURL + '/scl/result/fpacpt/result-view-arrow.png',
          downloadIcon: this.imgBaseURL + '/scl/result/fpacpt/result-view-download.png',
          back: this.imgBaseURL + '/scl/introduce/fpacpt/back.png',
          defaultQrcode: this.imgBaseURL + '/scl/default_miniapp_qrcode_new.png'
        },
        resultDetails: undefined,
        imgBaseUrl: this.imgBaseURL,
        selectedTabIndex: 0,
        resultShow: false,
        resultImg: ''
      }
    },
    computed: {
      ...mapGetters('user', ['clientUserUid']),
      listData() {
        return this.resultDetails?.tabs[this.selectedTabIndex].list
      }
    },
    watch:{
      pageData: {
        handler(val) {
          if (val) {
            this.resultDetails = val.resultDetails
            this.initCanvas()
          }
        },
        immediate: true,
        deep: true
      }
    },
    methods:{
      switchTab(index) {
        this.selectedTabIndex = index
      },
      showResult(flag) {
        this.resultShow = flag
        this.$emit('posterLoadingCom', flag)
      },
      backHandle() {
        uni.reLaunch({
          url: '/pages/sclList/sclList'
        })
      },
      async initCanvas() {
        let jumpUrl = 'p=2@id=' + this.pageData.sclId
        this.resultImg = await this.createChipCanvas(`${this.imgBaseURL}${this.resultDetails.shareBg}`, jumpUrl);
      },
      /**
       * 绘制海报
       */
      async createChipCanvas(imgUrl, jumpUrl) {
        console.log(imgUrl, '-----------------imgUrl');
        const tmpScene = jumpUrl || 'r=5@id=' + this.clientUserUid
        const tmpPage = 'pages/index/index'
        let qrCode = this.staticImgs.defaultQrcode
        let imgD = ''
		const resSclInfo = await this.$u.api.getSclInfo({sclId:this.pageData.sclId})
		if(resSclInfo.data.data.url){
			qrCode = resSclInfo.data.data.url
		}else{
			const {
				data: dRes
			} = await this.$u.api.getQrcodeUrl({
				sceneStr: tmpScene,
				pageStr: tmpPage
			})
			
			if (dRes.success) {
				qrCode = dRes.data
			}
		}
        console.log(qrCode, '----------qrCode')

        try {
          // 创建绘制工具
          const dp = await useDrawPoster({
            selector: 'dcanvas',
            loading: {
              create:'结果报告生成中...'
            },
            debug: true,
            width: 750,
            height: 1624
          })
          const w = dp.canvas.width
          const h = dp.canvas.height

          console.log(dp.canvas, '-----------dp.canvas-------')

          dp.draw(async (ctx) => {
            console.log(ctx, '-----------ctx')
            // 绘制背景图
            await ctx.drawImage(imgUrl, 0, 0, w, h)
            // 小程序二维码
            await ctx.drawRoundImage(qrCode, 136, 1426, 130, 130,
                100)
          })

          imgD = await dp.create()
        } catch (e) {
          console.log(e, '绘图')
        }
        console.log(imgD, '=========imgD')
        return imgD || imgUrl
      }
    }
  }
</script>

<style lang="scss" scoped>
@keyframes flash {
  0% {
    opacity: 1;
  }
  70% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@mixin right {
  .title-container {
    justify-content: flex-end;
  }

  .content {
    .content-text {
      clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 150rpx 100%, 0% calc(100% - 50rpx), 0% 0%);
      background: #FFF linear-gradient(18.43deg, transparent 42rpx, #090808 42rpx, #090808 46rpx, transparent 46rpx) no-repeat 0 100% / 150rpx 50rpx;
    }

    .content-decoration-box {
      clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 150rpx 100%, 0% calc(100% - 50rpx), 0% 0%);
      background: #FFF linear-gradient(18.43deg, transparent 42rpx, #090808 42rpx, #090808 46rpx, transparent 46rpx) no-repeat 0 100% / 150rpx 50rpx;
    }
  }

  .img {
    left: -10rpx;
    right: auto;
  }
}

@mixin even {
  &.even {
    clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 100rpx), calc(100% - 200rpx) 100%, 0% 100%, 0% 0%);
  }
}

.container {
  position: relative;
  min-height: 100vh;

  &.see-result {
    padding-bottom: 130rpx;
  }

  // 根据不同结果颜色不同
  &.red {
    background-color: #FF414C;
    .main-content {
      background-color: #FFB7BB;

      &.excessive {
        background-color: #FF414C;
      }

      .item {
        .title {
          background-image: linear-gradient(to bottom, #FF414C, #B1040E);
        }

        .title-decoration::before, .title-decoration::after {
          background-image: linear-gradient(to bottom, #FF414C, #B1040E);
        }

        .content {
          .content-decoration-box {
            background-color: #C1262F !important;
          }
        }

        &:nth-child(2n) {
          @include right;
        }

        @include even;
      }
    }
  }

  &.green {
    background-color: #6AC84B;
    .main-content {
      background-color: #86DF68;

      // 绿色特殊
      &.excessive {
        background-color: #319E0E;

        .item {
          &:nth-child(2n) {
            @include right;
          }

          @include even;
        }
      }

      &:not(.excessive) {
        .item {
          &:nth-child(3) {
            @include right;
          }
        }
      }

      .item {
        .title {
          background-image: linear-gradient(to bottom, #8EE671, #2A8E09);
        }

        .title-decoration::before, .title-decoration::after {
          background-image: linear-gradient(to bottom, #CCFDBB, #3DBB12);
        }

        .content {
          .content-decoration-box {
            background-color: #51BD2D !important;
          }
        }
      }
    }
  }

  &.blue {
    background-color: #60A5FE;
    .main-content {
      background-color: #AACFFF;

      &.excessive {
        background-color: #1F73DF;
      }

      .item {
        .title {
          background-image: linear-gradient(to bottom, #A1CBFF, #1679F9);
        }

        .title-decoration::before, .title-decoration::after {
          background-image: linear-gradient(to bottom, #9EC7FF, #4A8FE9);
        }

        .content {
          .content-decoration-box {
            background-color: #59A1FC !important;
          }
        }

        &:nth-child(2n) {
          @include right;
        }

        @include even;
      }
    }
  }

  &.yellow {
    background-color: #FAE616;
    .main-content {
      background-color: #FFF7C7;

      &.excessive {
        background-color: #DFC000;
      }

      .item {
        .title {
          color: #402A03;
          background-image: linear-gradient(to bottom, #FFFBD3, #FFBE00);
        }

        .title-decoration::before, .title-decoration::after {
          background-image: linear-gradient(to bottom, #FFF7CA, #D5C14D);
        }

        .content {
          .content-decoration-box {
            background-color: #ECD703 !important;
          }
        }

        &:nth-child(2n) {
          @include right;
        }

        @include even;
      }
    }
  }
}

.top-bg {
  width: 100%;
}

.share-bg {
  width: 100%;
  height: 1624rpx;
  min-height: 100vh;
}

.top-btn {
  position: absolute;
  right: 0;
  top: 792rpx;
  width: 280rpx;
  height: 130rpx;
}

.tabs {
  display: flex;
  padding: 0 23rpx;
  position: relative;

  .tab {
    margin: 0 13rpx -14rpx;
    width: 327rpx;
    height: 109rpx;
  }
}

.main-content {
  border-radius: 17rpx 17rpx 0 0;
  padding: 35rpx 35rpx 75rpx 18rpx;
  margin: 0 20rpx;
  position: relative;
  z-index: 2;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 150rpx 100%, 0% calc(100% - 50rpx), 0% 0%);

  .item {
    margin-top: 15rpx;
    position: relative;
    margin-bottom: 25rpx;

    .title-container {
      display: flex;
      padding: 50rpx 0 0;
    }

    .title-wrapper {
      width: 370rpx;
      display: flex;
      justify-content: center;
    }

    .title {
      font-weight: bolder;
      font-size: 40rpx;
      color: #FFF;
      border-radius: 40rpx;
      border: 6rpx solid #090808;
      padding: 0 47rpx;
      white-space: nowrap;
      height: 78rpx;
      display: flex;
      align-items: center;
    }

    .title-decoration {
      position: relative;
      height: 80rpx;

      &::before {
        content: "";
        width: 15rpx;
        height: 100%;
        position: absolute;
        left: calc(50% - 75rpx);
      }

      &::after {
        content: "";
        width: 15rpx;
        height: 100%;
        position: absolute;
        left: calc(50% + 60rpx);
      }
    }

    .content {
      position: relative;

      .content-text {
        padding: 90rpx 30rpx 90rpx;
        font-size: 30rpx;
        color: #333;
        line-height: 50rpx;
        text-align: justify;
        border: 5rpx solid #090808;
        position: relative;
        clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 100rpx), calc(100% - 200rpx) 100%, 0% 100%, 0% 0%);
        box-sizing: border-box;
        background: #FFF linear-gradient(-26.57deg, transparent 85rpx, #090808 85rpx, #090808 89rpx, transparent 89rpx) no-repeat 100% 100% / 200rpx 100rpx;
      }

      .content-decoration-box {
        position: absolute;
        border: 5rpx solid #090808;
        width: 100%;
        height: 100%;
        left: 20rpx;
        top: 25rpx;
        z-index: -1;
        clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 100rpx), calc(100% - 200rpx) 100%, 0% 100%, 0% 0%);
        background: #FFF linear-gradient(-26.57deg, transparent 85rpx, #090808 85rpx, #090808 89rpx, transparent 89rpx) no-repeat 100% 100% / 200rpx 100rpx;
      }
    }

    .img {
      width: 369rpx;
      height: 270rpx;
      right: -10rpx;
      position: absolute;
      top: 30rpx;
    }
  }
}

.share-container {
  position: relative;
  height: 1624rpx;
  min-height: 100vh;
}

.mask-bg {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
}

.result-btn-row {
  position: absolute;
  bottom: 120rpx;
  right: 0;
  left: 0;
  margin: 0 auto;
  width: 450rpx;
  height: 120rpx;
}

.result-btn {
  width: 100%;
  height: 100%;
}

.result-arrow {
  position: absolute;
  right: 50rpx;
  top: 0;
  bottom: 0;
  margin: auto 0;
  animation: flash 2s linear infinite;
  width: 38rpx;
  height: 38rpx;
}

.download {
  position: absolute;
  bottom: 50rpx;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;

  .download-text {
    font-weight: bold;
    font-size: 29rpx;
    color: #FFF;
  }

  .download-icon {
    width: 32rpx;
    height: 32rpx;
    margin-left: 12rpx;
  }
}

.back-btn {
  position: absolute;
  top: 168rpx;
  left: 0;
  width: 123rpx;
  height: 88rpx;
}
</style>